<html class="no-js" lang="en">

<head>
   <meta charset="utf-8" />

   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
   <meta name="format-detection" content="telephone=no" />

   
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> 
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=geometry"></script>

<script type="text/javascript"> 

<?php
	$address = $_REQUEST['address'];
	echo "var address = '$address';";
?>

var browserSupportFlag =  new Boolean();
var geocoder;
  
var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(-34.397, 150.644);
		
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			navigator.geolocation.getCurrentPosition(function(position) {
				
				currentLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
				directionsDisplay = new google.maps.DirectionsRenderer();
				directionsDisplay.setPanel(document.getElementById("directionsPanel"));
				
				var request = {
					origin: currentLocation, 
					destination: results[0].geometry.location,
					travelMode: google.maps.DirectionsTravelMode.DRIVING
				};
				directionsService.route(request, function(response, status) {
					if (status == google.maps.DirectionsStatus.OK) {
						directionsDisplay.setDirections(response);
					}
				});
			});
		} else {
			alert("Geocode was not successful for the following reason: " + status);
		}
	});
}

</script>

</head>

<body onload="initialize()">
	<!--<div>
		<b>Mode of Travel: </b>
		<select id="mode" onchange="calcRoute();">
		  <option value="DRIVING">Driving</option>
		  <option value="WALKING">Walking</option>
		  <option value="BICYCLING">Bicycling</option>
		</select>
	</div>-->
	<div id="directionsPanel" style="float:left;width:100%; height:100%"></div>
</body>

</html>